<template>
	<div class="container">
		<button>剩余{{ rest }}</button>
		<button @click="getAllTasks">全部</button>
		<button @click="getIncomplete">未完成</button>
		<button @click="getComplete">已完成</button>
		<button @click="onDelete">清除已完成</button>
	</div>
</template>

<script>
import ToDoList from "../ToDoList";
export default {
	data() {
		return {};
	},
	computed: {
		list() {
			return ToDoList.list;
		},
		showingList() {
			return ToDoList.showingList;
		},
        rest () {
            return ToDoList.list.filter(item => !item.isDone).length
        }
	},
	methods: {
		getAllTasks() {
			ToDoList.$emit("getAllTasks");
		},
		getIncomplete() {
			ToDoList.$emit("getIncomplete");
		},
		getComplete() {
			ToDoList.$emit("getComplete");
		},
        onDelete(){
            ToDoList.$emit("onDelete");
        }
	},
};
</script>

<style scoped>
.container {
	width: 500px;
	height: 30px;
	background-color: rgb(235, 207, 207);
}
button {
	margin-left: 30px;
}
</style>